﻿
@{
    ViewBag.Title = "首页";
}

@section Pagetitle{
    @AdminCommon.PageTitle("首页", "")
}

<script src="~/Scripts/highcharts.js"></script>
<script>

        var spare=@ViewBag.SpareCount;
        var busy=@ViewBag.BusyCount;
        var scrap=@ViewBag.ScrapCount;
    $(function () {
        //$.get("http://192.168.4.70:802/API/GetIP?Ip=192.168.2.32",function(data){
        //    console.log(data.Ip);
        //    console.log(data.IpClass);
        //    console.log(data.IpAdress);
        //    console.log(data.IsDJ);
        //},"json")
            $('#container_tj').highcharts({
                chart: {
                    plotBackgroundColor: "#f3f3f3",
                    plotBorderColor:"#F3F3F3",
                    plotBorderWidth: 0,
                    plotShadow: false
                },
                colors: ['#23b7e5', '#23ad44', '#f9d21a', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
                title: {
                    text: @ViewBag.ServerCount+'<br/><p style="font-size:15px;">总数<p/>',
                    align: 'center',
                    verticalAlign: 'middle',
                    y: 10,
                    style: {
                        color: '#f05050',
                        fontSize: "30px",
                        fontWeight: "blod",
                        fontFamily: "微软雅黑"
                    }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        },
                        startAngle: 0,
                        endAngle: 360,
                        center: ['50%', '50%']
                    }
                },
                series: [{
                    type: 'pie',
                    name: '百分比',
                    innerSize: '50%',
                    data: [
                        ['库存',       spare],
                        ['使用中', busy],
                        ['报废',    scrap]
                    ]
                }]
            });
        });
</script>
<div class="row">
    <div class="col-md-5 col-sm-5 container-left">
        <div class="row">
            <div class="portlet light ">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-cursor font-purple-intense hide"></i>
                        <span class="caption-subject font-purple-intense bold uppercase">机柜使用情况</span>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="container-left-1">
                                <div class="number transactions">
                                    <a href="@Url.Action("Index", "cabinet")">@ViewBag.CabinetRackCount</a>
                                </div>
                                <p>机架总数</p>
                            </div>
                        </div>
                        <div class="margin-bottom-10 visible-sm">
                        </div>
                        <div class="col-md-4">
                            <div class="container-left-2">
                                <div class="number visits">
                                    <a href="@Url.Action("Index", "cabinet",new { statu = 1 })">@ViewBag.CabinetRackBusy</a>
                                </div>
                                <p>上架</p>
                            </div>
                        </div>
                        <div class="margin-bottom-10 visible-sm">
                        </div>
                        <div class="col-md-4">
                            <div class="container-left-3">
                                <div class="number bounce">
                                    <div class="number visits">
                                        <a href="@Url.Action("Index", "cabinet",new { isNull= 1 })">@ViewBag.subCabinetRack</a>
                                    </div>
                                </div>
                                <p>空位</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="portlet light ">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-cursor font-purple-intense hide"></i>
                        <span class="caption-subject font-purple-intense bold uppercase">IP使用情况</span>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="container-left-1">
                                <div class="number transactions">
                                    <a href="@Url.Action("Index","IPs")">@ViewBag.IPCount</a>
                                </div>
                                <p>总数</p>
                            </div>
                        </div>
                        <div class="margin-bottom-10 visible-sm">
                        </div>
                        <div class="col-md-4">
                            <div class="container-left-2">
                                <div class="number visits">
                                    <a href="@Url.Action("Index","IPs",new {statu=1 })">@ViewBag.UseIPCout</a>
                                </div>
                                <p>使用中</p>
                                @*<a class="title" href="javascript:;">
                                        使用中<i class="icon-arrow-right"></i>
                                    </a>*@
                            </div>
                        </div>
                        <div class="margin-bottom-10 visible-sm">
                        </div>
                        <div class="col-md-4">
                            <div class="container-left-3">
                                <div class="number bounce">
                                    <a href="@Url.Action("Index","IPs",new {statu=0 })">@ViewBag.subIPCount</a>
                                </div>
                                <p>未使用</p>
                                @*<a class="title" href="javascript:;">
                                        未使用 <i class="icon-arrow-right"></i>
                                    </a>*@
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-7 col-sm-7">
        <div class="row">
            <div class="portlet light ">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-cursor font-purple-intense hide"></i>
                        <span class="caption-subject font-purple-intense bold uppercase">服务器使用情况</span>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row" style="background-color:#f3f3f3; font-family: 微软雅黑 Regular;font-size: 18px;">
                        <div id="container_tj">

                        </div>
                        <div style="float:right;width:200px;height:400px;">
                            <div style="padding-top:100px;">
                                <div><div class="container_right container_right_1"></div>服务器总数：@ViewBag.ServerCount</div>
                                <div><div class="container_right container_right_3"></div>库存：@ViewBag.SpareCount</div>
                                <div><div class="container_right container_right_4"></div>使用中：@ViewBag.BusyCount</div>
                                <div><div class="container_right container_right_5"></div>报废：@ViewBag.ScrapCount</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@*<div style="width:500px;height:500px;" id="main"></div>*@

